Ant Design Vue :table 组件 自定义分页器、排序、插槽使用 | 您所在的位置:网站首页 › a-table 分页 › Ant Design Vue :table 组件 自定义分页器、排序、插槽使用 |
Ant Design Vue 是蚂蚁金服推出的后台服务组件库,目前有62个开箱即用的高质量 Vue 组件。后台管理应用中,table和form表单的使用场景比较多,于是做一下table组件的使用总结。
一、table组件官方文档地址
二、举个栗子,定义一个带分页器的table组件:
ref=“table” ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,这里指向table这个元素 :columns=“columns” 表格列的配置描述,定义在data初始化数据中 columns: [ { title: "id", dataIndex: "id" // 列数据在数据项中对应的 key }, ]:dataSource=“lists” 数据数组 :pagination=“pagination” true显示分页器,反之 设置为true效果是这样的 可自定义分页器,自定义分页器的效果如下: 在data中定义: pagination: { current: 1, pageSize: 10, defaultPageSize: 10, showTotal: total => `共 ${total} 条数据`, showSizeChanger: true, // 可以改变每页个数 pageSizeOptions: ["10", "20", "30", "40"], onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize) }当用户点击切换页数的时候根据获得的数据去切换pagination对象的current和pageSize这两个字段即可。 onChange(){ const { current, pageSize } = e; this.pagination.current = current; this.pagination.pageSize = pageSize; this.getTableList(); } 四、排序需要使用这个字段 参数说明类型sorter排序函数,本地排序使用一个函数(参考 Array.sort 的 compareFunction),需要服务端排序可设为 trueFunction 或boolean第一步先在table中将列设置成可以排序的状态 columns: [ { title: "id", dataIndex: "id", // 列数据在数据项中对应的 key sorter:true }, ]设置成功会出现这个图标,这个table组件的排序有三种状态:升序(ascend)、降序(descend)、不做排序 五、插槽使用 如果想在table中显示一些自定义的元素,可以使用插槽,如下: 然后在html中去写插槽元素,可以是任何标签容器,只要插槽名一致即可: {{ text }} |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |